<template>
    <ul id="zero-pagination" v-if="pages!==1 && pages!==0">
        <li :class="current === 1?'disabled':''">
            <a href="javascript:;" @click="prev">
                <i class="fas fa-angle-left"></i>
            </a>
        </li>
        <li v-for="(node,index) in pageNodeList" :class="current === node.value?'active':''" :key="index">
            <a v-if="node.text==='prevMore'"  @click="prev">
                <i class="fas fa-angle-double-left"></i>
            </a>
            <a href="javascript:;" @click="go(node.value)">
                
            </a>     
            <a v-if="node.text==='nextMore'"  @click="next">
                <i class="fas fa-angle-double-right"></i>
            </a> 
        </li>
        <li :class="current === pages?'disabled':''">
            <a href="javascript:;" @click="next">
                <i class="fas fa-angle-right"></i>
            </a>
        </li>
        <li v-if="!simple">
            <a href="javascript:;" @click="first">
                首页
            </a>
        </li>
        <li v-if="!simple">
            <a href="javascript:;" @click="last">
                尾页
            </a>
        </li>
        <li v-if="!simple">
            <select v-model="currentPageSize" @change="setCurrentPageSize">
                <!-- 不动态绑定value会得到一个字符串导致类型检测失败 -->
                <option :value="5" selected>5</option>
                <option :value=10>10</option>
                <option :value=15>15</option>
                <option :value=20>20</option>
            </select>
        </li>
    </ul>
</template>

<script>
/**
 * name:zeroPagination
 * props:{
 *  total:Number
 *  currentPage:Number
 *  pageSize:Number
 *  pageNodes:Number 偶数会强制成奇数
 *  simple:Boolean
 * }
 * Function:{
 *  changePage return current
 *  changePageSize return currentPageSize
 * }
 */
export default {
    name:'zeroPagination',
    data(){
        return{
            // 当前每页显示条数
            currentPageSize:this.pageSize,
            // 当前页
            current:this.currentPage,
            // 总记录数
            size:this.total,
        }
    },
    props:{
        // 数据总数
        total:{type:Number,default:0},
        // 每页显示条数
        pageSize:{type:Number,default:5},
        // 当前页
        currentPage:{type:Number,default:1},
        // 可见页码数
        pageNodes:{
            // 指定分页项目最多个数
            type:Number,
            default:4,
            // 强制转换为奇数
            coerce:(v)=>{
                v=v>0?v:10;
                return v % 2 === 1?v:v+1;
            }
        },
        simple:{
            type:Boolean,
            default:false
        }
    },
    computed:{
        // 总页数
        pages:function(){
            return Math.ceil(this.size/this.currentPageSize);
        },
        // 分页页码
        pageNodeList:function(){
            // 页码个数
            const page_node_number = this.pageNodes;
            // 总页数
            const page_count = this.pages;
            // 当前页
            let current_page = this.current;
            // 偏移量
            const _offset = Math.floor(page_node_number/2);
            const offset = {
                start : current_page - _offset,
                end: current_page + _offset,
            }

            let list = [];

            if(offset.start < 1){
                offset.end = offset.end + (1 - offset.start);
                offset.start = 1;
            }
            if(offset.end > page_count){
                offset.start = offset.start - (offset.end - page_count);
                offset.end = page_count;
            }
            if(offset.start < 1){
                offset.start = 1
            }

            for(let i = offset.start; i <= offset.end;i++){
                list.push({
                    text:i,
                    value:i
                });
            }
            let tempList = [];
            if(offset.start > 1){
                tempList.push({
                    text:'prevMore',
                    value:''
                })
            }
            list.forEach(item=>tempList.push(item));
            if(offset.end < page_count){
                tempList.push({
                    text:'nextMore',
                    value:''
                })
            }
            return tempList;
        }
    },
    methods:{
        setCurrentPageSize(){
            this.$emit('changePageSize',this.currentPageSize);
        },
        prev(){
            if (this.current > 1) {
                this.go(this.current - 1)
            }
        },
        next(){
            if (this.current < this.pages) {
                this.go(this.current + 1)
            }
        },
        first(){
            if (this.current !== 1) {
                this.go(1)
            }
        },
        last(){
            if (this.current != this.pages) {
                this.go(this.pages)
            }
        },
        go (page) {
            if (this.current !== page) {
                this.current = page
                //父组件通过change方法来接受当前的页码
                this.$emit('changePage',this.current);
            }
        }
    },
    watch:{
        currentPage(val) {
            this.current = val || 1
        },
        pageSize(val) {
            this.currentPageSize = val || 5
        },
        total(val) {
            this.size = val || 0
        },
        currentPageSize(){
            // 监听改变每页显示数
            let pages = Math.ceil(this.size / this.currentPageSize);
            if (this.currentPage > pages) {
                this.current = pages;        
                this.$emit('changePage',this.current);
            }
        }
    }
}
</script>

<style>
#zero-pagination {
    margin-top: 20px;
    text-align: center;
    overflow: hidden;
    display: table;
    margin: 0 auto;
    height: 50px;
}
#zero-pagination li{
    height: 25px;
    line-height: 25px;
    color: #757575;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 0 8px;
}
#zero-pagination a{
    color: #757575;
}
#zero-pagination li.disabled{
    display: none;
}
</style>